<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">Editor</h1>
		<div class="entry">
        <p>Editor is an input component with rich text editing features. Toolbar can be configured with custom controls.</p>

			<h:form id="form">
                
                <p:editor id="editor" widgetVar="editor" value="#{editorBean.value}" width="600"/>

                <h:panelGrid columns="2" style="margin-top:10px">
                    <p:commandButton id="submitButton" value="Submit" update="display" oncomplete="dlg.show()" icon="ui-icon-disk" />
                    <p:commandButton id="clearButton" type="button" value="Clear" onclick="editor.clear()" icon="ui-icon-close" />
                </h:panelGrid>

                <p:dialog header="Content" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true">
                    <h:outputText id="display" value="#{editorBean.value}" escape="false" />
                </p:dialog>

            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="editor.xhtml">
                    <pre name="code" class="xml">
&lt;h:form id="form"&gt;

    &lt;p:editor id="editor" value="\#{editorBean.value}" width="600"/&gt;

    &lt;h:panelGrid columns="2" style="margin-top:10px"&gt;
        &lt;p:commandButton id="submitButton" value="Submit" update="display" oncomplete="dlg.show()"
                        icon="ui-icon-disk" /&gt;
        &lt;p:commandButton id="clearButton" type="button" value="Clear" onclick="editor.clear()"
                        icon="ui-icon-close" /&gt;
    &lt;/h:panelGrid&gt;

    &lt;p:dialog header="Content" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true"&gt;
        &lt;h:outputText id="display" value="\#{editorBean.value}" escape="false" /&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
                    </pre>
                </p:tab>

                <p:tab title="EditorBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

public class EditorBean {

	private String value;

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }
}
                    </pre>
                </p:tab>
            </p:tabView>
					
		</div>
	</ui:define>
</ui:composition>